<template>
  <div>
    <!-- <el-table :header-cell-style="{background:'#f5f6f6'}" :data="dataList" border style="width: 100%">
      <el-table-column prop="title" show-overflow-tooltip label="表单字段">
        <template #default="scope">
          <span v-if="scope.row.required" style="color: #c75450"> * </span>
          <span>{{ scope.row.label }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="readOnly" label="只读" width="80">
        <template  #default="scope">
          <el-radio label="R" v-model="scope.row.permSelect" @change="allSelect('R')">只读</el-radio>
        </template>
        <template #default="scope">
          <el-radio v-model="scope.row.perm" label="R" :name="scope.row.name"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="editable" label="可编辑" width="90" v-if="nowNode.type !== 'CC'">
        <template #default="scope">
          <el-radio label="E" v-model="scope.row.permSelect" @change="allSelect('E')">可编辑</el-radio>
        </template>
        <template #default="scope">
          <el-radio v-model="scope.row.perm" label="E" :name="scope.row.id"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="hide" label="隐藏" width="80">
        <template  #default="scope">
          <el-radio label="H" v-model="scope.row.permSelect" @change="allSelect('H')">隐藏</el-radio>
        </template>
        <template #default="scope">
          <el-radio v-model="scope.row.perm" label="H" :name="scope.row.id"></el-radio>
        </template>
      </el-table-column>
    </el-table> -->
    <!-- <a-table
          :scrollbar="false"
          :bordered="false"
          :hoverable="false"
          :data="dataList"
          :pagination="false">
        <template #columns>
          <a-table-column v-for="subWidget in dataList" aria-label="表单字段">
            <span v-if="subWidget.required" style="color: #c75450"> * </span>
            <span>{{ subWidget.label }}</span>
          </a-table-column>
        </template>
      </a-table> -->
    <el-table :header-cell-style="{background:'#f5f6f6'}" :data="dataList" border style="width: 100%">
      <el-table-column prop="title" show-overflow-tooltip label="表单字段">
        <template solt-scope="scope">
          <span v-if="scope.row.required" style="color: #c75450"> * </span>
          <span>{{ scope.row.label }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="readOnly" label="只读" width="80">
        <template solt-scope="scope">
          <el-radio label="R" v-model="scope.row.permSelect" @change="allSelect('R')">只读</el-radio>
        </template>
        <template solt-scope="scope">
          <el-radio v-model="scope.row.perm" label="R" :name="scope.row.name"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="editable" label="可编辑" width="90" v-if="nowNode.type !== 'CC'">
        <template solt-scope="scope">
          <el-radio label="E" v-model="scope.row.permSelect" @change="allSelect('E')">可编辑</el-radio>
        </template>
        <template solt-scope="scope">
          <el-radio v-model="scope.row.perm" label="E" :name="scope.row.id"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="hide" label="隐藏" width="80">
        <template solt-scope="scope">
          <el-radio label="H" v-model="scope.row.permSelect" @change="allSelect('H')">隐藏</el-radio>
        </template>
        <template solt-scope="scope">
          <el-radio v-model="scope.row.perm" label="H" :name="scope.row.id"></el-radio>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { reactive, computed, onBeforeMount, onMounted, ref, toRaw, watch } from "vue";
import {useFlowStore} from "@/store/flowable";
import { IconDelete, IconSwap, IconPlus } from "@arco-design/web-vue/es/icon";
let flowStore = useFlowStore();
let dataList = ref([])
dataList.value=flowStore.flowDefinition.flowWidgets?flowStore.flowDefinition.flowWidgets:[];
const FormAuthorityConfig = reactive({
    components: {},
    tableData: [],
    isIndeterminate: false,
    permSelect: '',
    checkStatus: {
      readOnly: true,
      editable: false,
      hide: false
    }
});
const created = () =>{
  //备份
    let oldPermMap = FormAuthorityConfig.formPerms.toMap('id');
    //重新清空，按顺序加载权限
    FormAuthorityConfig.formPerms.length = 0;
    FormAuthorityConfig.formPermsLoad(oldPermMap, FormAuthorityConfig.formData);
};
const allSelect = (type) =>{
  FormAuthorityConfig.permSelect = type
  FormAuthorityConfig.formPerms.forEach(f => f.perm = type)
};
const formPermsLoad = (oldPermMap, forms) =>{
  forms.forEach(form => {
        if (form.name === 'SpanLayout') {
          FormAuthorityConfig.formPermsLoad(oldPermMap, form.props.items)
        } else {
          //刷新名称
          let old = oldPermMap.get(form.id)
          if (old){
            old.title = form.title
            old.required = form.props.required
            FormAuthorityConfig.formPerms.push(old)
          }else {
            FormAuthorityConfig.formPerms.push({
              id: form.id,
              title: form.title,
              required: form.props.required,
              perm: flowStore.state.selectedNode.type === 'ROOT' ? 'E' : 'R'
            })
          }
        }
    })
};

const nowNode =computed(()=>{
      return flowStore.state.selectedNode
    })

const formData = computed(()=> {
      return flowStore.state.design.formItems
    })
const formPerms = computed(()=> {
      return flowStore.state.selectedNode.props.formPerms
    })

// watch(formPerms, (newValue, oldValue) => {
//    	console.log("=====变了", newValue, oldValue);
// });
watch (
  () => FormAuthorityConfig.formPerms,
  (newValue, oldValue) => {
    const set = new Set(FormAuthorityConfig.formPerms.map(f => f.perm))
    FormAuthorityConfig.permSelect = set.size === 1 ? set.values()[0] : ''
  },
  {deep: true}
);
// export default {
//   name: "FormAuthorityConfig",
//   components: {},
//   data() {
//     return {
//       tableData: [],
//       isIndeterminate: false,
//       permSelect: '',
//       checkStatus: {
//         readOnly: true,
//         editable: false,
//         hide: false
//       }
//     }
//   },
//   created() {
//     //备份
//     let oldPermMap = this.formPerms.toMap('id')
//     //重新清空，按顺序加载权限
//     this.formPerms.length = 0;
//     this.formPermsLoad(oldPermMap, this.formData)
//   },
//   computed: {

//   },
//   methods: {
//     allSelect(type) {
//       this.permSelect = type
//       this.formPerms.forEach(f => f.perm = type)
//     },
//     formPermsLoad(oldPermMap, forms) {
//       forms.forEach(form => {
//         if (form.name === 'SpanLayout') {
//           this.formPermsLoad(oldPermMap, form.props.items)
//         } else {
//           //刷新名称
//           let old = oldPermMap.get(form.id)
//           if (old){
//             old.title = form.title
//             old.required = form.props.required
//             this.formPerms.push(old)
//           }else {
//             this.formPerms.push({
//               id: form.id,
//               title: form.title,
//               required: form.props.required,
//               perm: this.$store.state.selectedNode.type === 'ROOT' ? 'E' : 'R'
//             })
//           }
//         }
//       })
//     },
//     handleCheckAllChange() {

//     }
//   },
//   watch: {
//     formPerms: {
//       deep: true,
//       handler() {
//         const set = new Set(this.formPerms.map(f => f.perm))
//         this.permSelect = set.size === 1 ? set.values()[0] : ''
//       }
//     },

//   }
// }
</script>

<style lang="less" scoped>

/deep/ .el-table__row {
  & > td:first-child {
    .cell {
      text-align: left;
    }
  }

  .cell {
    text-align: center;
  }

  .el-radio__label {
    display: none;
  }
}
</style>
